<script setup>
import { onMounted, ref } from "vue";
import { UserFilled, Comment } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { login } from "@/api";

const router = useRouter();

const user = ref(); // admin
const pwd = ref(); // rf@admin@@1130
const checked = ref(false);

const loginFunc = async () => {
  if (!user.value) return ElMessage.warning("请输入账号");
  if (!pwd.value) return ElMessage.warning("请输入密码");

  const res = await login({ password: pwd.value, username: user.value });
  if (res.code !== 200) return;
  if (checked.value) {
    const obj = {
      user: user.value,
      pwd: pwd.value,
      checked: checked.value,
    };
    window.localStorage.setItem("loginObj", JSON.stringify(obj));
  }
  router.push("/pagehome");
};

const homeTitle = computed(() => {
  return window.globalObj.homeTitle;
});

onMounted(() => {
  const loginObj = window.localStorage.getItem("loginObj");
  if (loginObj) {
    const data = JSON.parse(loginObj);
    checked.value = data.checked;
    user.value = data.user;
    pwd.value = data.pwd;
  }
});
</script>
<template>
  <div class="login">
    <div class="login-form">
      <div class="title">{{ homeTitle }}</div>
      <div class="input-box">
        <el-input
          v-model="user"
          size="large"
          class="login-input top-30"
          placeholder="账号"
        >
          <template #prefix>
            <el-icon class="el-input__icon" color="#fff" :size="16">
              <UserFilled />
            </el-icon>
          </template>
        </el-input>
        <el-input
          v-model="pwd"
          size="large"
          show-password
          class="login-input top-22"
          placeholder="密码"
        >
          <template #prefix>
            <el-icon class="el-input__icon" color="#fff" :size="16">
              <Comment />
            </el-icon>
          </template>
        </el-input>
        <div class="readme">
          <el-checkbox
            v-model="checked"
            class="top-22"
            label="记住密码"
            size="large"
          />
        </div>
        <el-button
          @click="loginFunc"
          size="large"
          class="login-btn top-22"
          type="primary"
          >登录</el-button
        >
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.login {
  width: 100%;
  height: 100vh;
  background-image: url("@/assets/app/login.png");
  background-position: center center;
  background-size: 100% 100%;
  position: relative;

  .login-form {
    width: 760px;
    height: 453px;
    border-radius: 6px;
    padding: 25px;
    position: absolute;
    left: 50%;
    margin-left: -380px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url("@/assets/app/conter.png");
    background-position: center center;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;

    .title {
      width: 100%;
      color: #d1ebf6;
      font-size: 20px;
      text-align: center;
      position: absolute;
      top: 8px;
      left: 35px;
    }

    .input-box {
      width: 500px;
      margin-top: 100px;
    }

    .login-btn {
      display: block;
      width: 100%;
      height: 46px;
      border-radius: 22px;
      background-color: #00e0db;
      color: #000;
    }

    .readme {
      width: 100%;
      display: flex;
      justify-content: flex-end;

      :deep {
        .el-checkbox__label {
          color: #fff;
        }

        .el-checkbox__input.is-checked .el-checkbox__inner {
          background-color: rgba(1, 187, 219, 0.3);
          border-color: #00e0db;
        }
      }
    }
  }

  .login-input {
    width: 100%;

    :deep {
      .el-input__wrapper {
        height: 46px;
        background: rgba(4, 86, 102, 0.3) !important;
        color: #fff !important;
        border-radius: 22px;
        box-shadow: none;
        border: 2px solid #044a5c;
        line-height: 44px !important;
      }

      .el-input__password,
      .el-input__inner {
        color: #fff !important;
      }
    }
  }

  .top-30 {
    margin-top: 30px;
  }

  .top-22 {
    margin-top: 22px;
  }
}
</style>
